<template>
  <div class="verification-box">
    <div class="verification-box-auto">
      <div class="verification-box-auto-head" v-on:click="aqyzFun(false)">
        <span>×</span>
      </div>
      <p class="verification-box-auto-font">
        <span>安全验证</span>
      </p>
      <h3 class="verification-box-auto-title">
        <span>请完成下方验证后继续操作</span>
      </h3>
      <div class="verification-box-auto-faceboder">
        <!-- 图片 -->
        <div
          class="verification-box-auto-faceboder-img"
          :style="{ transform: 'rotateZ(' + axialMove + 'deg)' }"
          v-on:click="zzcShowFlag = true"
        >
          <img style="width: 100%; height: 100%" ref="imgDom1" :src="Url" />
        </div>
        <!--指向方向 图片 -->
        <div
          :class="
            (DoneFlag5 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-faceboder-coordinate'
          "
        ></div>
        <!-- 指向加载图片 -->
        <div
          :class="
            (DoneFlag1 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-faceboder-jz'
          "
        ></div>
        <!-- 加载的元素 -->
        <div
          :class="
            (DoneFlag2 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-faceboder-point-jz'
          "
        >
          <div>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <!-- 错误图片 -->
        <div
          :class="
            (DoneFlag3 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-faceboder-error'
          "
        >
          ×
        </div>
        <!-- 成功图片 -->
        <div
          :class="
            (DoneFlag4 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-faceboder-success'
          "
        >
          ✔
        </div>
      </div>
      <div class="a_1997">点击图片查看原图</div>
      <!-- 拖动元素 -->
      <div class="verification-box-auto-td" ref="tdDom1">
        <div
          :class="
            'verification-box-auto-td-yuan verification-box-auto-td-yuan-start' +
            (startErrorFlag ? ' verification-box-auto-td-yuan-errorStart' : '')
          "
          ref="tdDom2"
        >
          <p></p>
        </div>
        <div
          :class="
            (DoneFlag6 ? '' : 'verification-box-auto-faceboder-hide ') +
            'verification-box-auto-td-title'
          "
        >
          <p class="slideShine">拖动左滑块使图片为正</p>
        </div>
      </div>
    </div>
    <div class="zzc animation-opacity" v-show="zzcShowFlag">
      <div class="zzc-yt">
        <img :src="Url" />
      </div>
      <span class="zcc-clons" v-on:click="zzcShowFlag = false">×</span>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
const {
  attrs: { aqyzFun },
} = getCurrentInstance();
import { useUserStore } from "../../pinia/store.js";
import { storeToRefs } from "pinia";
const user_store = useUserStore();
const { AqyzZosFun } = user_store;
// 图片的路径
const Url = ref("");
// 随机的轴向位置
const axialMove = ref(0);
// 固定的轴向位置
const axialMoveFixed = ref(0);
const DoneFlag1 = ref(false);
const DoneFlag2 = ref(false);
const DoneFlag3 = ref(false);
const DoneFlag4 = ref(false);
const DoneFlag5 = ref(false);
const DoneFlag6 = ref(true);
const zzcShowFlag = ref(false);
const startErrorFlag = ref(false);
let imgDom1 = null;
let uDomDrag = null;
let yzDone = false;

// 浏览器阻止滚轮事件

watch(zzcShowFlag, function (done) {
  if (done) {
    document.addEventListener("wheel", EventFun, { passive: false });
  } else {
    document.removeEventListener("wheel", EventFun);
  }
});
const EventFun = function (e) {
  e.preventDefault();
};

// 元素挂载到 浏览器后执行的钩子函数
onMounted(function () {
  const { refs } = getCurrentInstance();
  const uDom = refs["tdDom1"];
  uDomDrag = refs["tdDom2"];
  imgDom1 = refs["imgDom1"];
  const pageMove = {
    x: 0,
  };
  let angle = 0;
  const move = function (e) {
    const ev = e.changedTouches?.[0] || undefined;
    const { clientX } = ev || e;
    let target = clientX - pageMove.x;
    const ZMOVE = uDom.clientWidth - uDomDrag.offsetWidth;
    if (target <= 0) target = 0;
    else if (target >= ZMOVE) target = ZMOVE;
    imgDom1.style.transform = "rotateZ(" + (target / ZMOVE) * 360 + "deg)";
    uDomDrag.style.left = target + "px";
    angle = (target / ZMOVE) * 360;
  };
  const down = function (e) {
    if (yzDone) return;
    e?.preventDefault?.();
    e?.stopPropagation?.();
    const ev = e.changedTouches?.[0] || undefined;
    const { clientX } = ev || e;
    pageMove.x = clientX;
    // 指向方向 显示出来
    DoneFlag5.value = true;
    // 拖动左滑文字消失
    DoneFlag6.value = false;
    document.addEventListener("touchmove", move);
    document.addEventListener("mousemove", move);
  };
  const up = function () {
    if (yzDone) return;
    pageMove.x = 0;
    yzDone = true;
    isNearFun(angle);
    angle = 0;
    // 指向方向 隐藏
    DoneFlag5.value = false;
    // 拖动左滑文字显示
    DoneFlag6.value = true;
    document.removeEventListener("touchmove", move);
    document.removeEventListener("mousemove", move);
  };
  uDomDrag.ontouchstart = down;
  uDomDrag.onmousedown = down;
  uDomDrag.ontouchend = up;
  uDomDrag.onmouseup = up;
});
// 拖动后判断 是否接近
const isNearFun = function (angle) {
  const target = angle + axialMove.value;
  DoneFlag1.value = true;
  DoneFlag2.value = true;
  setTimeout(function () {
    DoneFlag2.value = false;
    if (target >= 350 && target <= 370) {
      DoneFlag4.value = true;
      setTimeout(function () {
        DoneFlag4.value = false;
        DoneFlag1.value = false;
        uDomDrag.style.left = "0px";
        imgDom1.style.transform = "rotateZ(" + 0 + "deg)";
        // 隐藏 安全验证
        aqyzFun(false);
        AqyzZosFun(false);
        yzDone = false;
      }, 100);
    } else {
      DoneFlag3.value = true;
      setTimeout(function () {
        DoneFlag3.value = false;
        DoneFlag1.value = false;
        startErrorFlag.value = true;
        const target1 = uDomDrag.offsetLeft;
        let indx = 0;
        let done = false;
        let timer1 = null;
        const Funa = (v) => {
          if (indx === 5) {
            indx = 0;
            clearTimeout(timer1);
            initFun();
            startErrorFlag.value = false;
            uDomDrag.style.left = "0px";
            yzDone = false;
            imgDom1.style.transform = "rotateZ(" + 0 + "deg)";
          } else {
            indx += 1;
            done = !done;
            uDomDrag.style.left = (done ? target1 + 2 : target1 - 2) + "px";
            timer1 = setTimeout(Funa, 100);
          }
        };
        Funa();
      }, 100);
    }
  }, 1000);
};
// 初始化的 函数
const initFun = function () {
  // 随机图片
  const numUrl = Math.floor(Math.random() * 9) + 1;
  const numUrl2 = Math.floor(Math.random() * 30) + 1;
  Url.value = `/ximg/${numUrl}-${numUrl2}.jpeg`;
  axialMove.value = Math.floor(Math.random() * 360);
  // 判断如果角度有问题 就给他固定的值
  if (axialMove.value <= 20) axialMove.value = 180;
  if (axialMove.value >= 340) axialMove.value = 280;
  axialMoveFixed.value = axialMove.value;
};
initFun();
</script>
<style scoped>
.a_1997 {
  font-size: 0.6rem;
  text-align: center;
  margin-top: 0.4rem;
  color: #666;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  background: #b8b8b8 -webkit-linear-gradient(
      left,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8 -webkit-gradient(
      linear,
      right top,
      left top,
      from(transparent),
      color-stop(90%, #111),
      color-stop(90%, transparent)
    ) no-repeat 0 0;
  background: #b8b8b8 -webkit-linear-gradient(
      right,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8 -moz- oldlinear-gradient(
      right,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8
    linear-gradient(to left, transparent, #111 90%, transparent) no-repeat 0 0;
  color: transparent;
  -webkit-background-size: 20% 100%;
  background-size: 20% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: slideShine 2s linear infinite;
  -moz-animation: slideShine 2s linear infinite;
  animation: slideShine 2s linear infinite;
  animation: twoPointJz-dad129601 2s linear infinite;
}
@keyframes twoPointJz-dad129601 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
.zzc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1004;
}
.zcc-clons {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  font-size: 1.5rem;
  color: #fff;
}
.zzc-yt {
  width: 10rem;
  height: 10rem;
  position: absolute;
  left: 2rem;
  top: 6rem;
  background: #ffff;
}
.zzc-yt img {
  width: 100%;
  height: 100%;
}
.verification-box {
  width: 15rem;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  left: 0px;
  top: 0px;
}
.verification-box-auto {
  width: 100%;
  height: 100vh;
}
.verification-box-auto-head {
  width: 100%;
  height: 2.1875rem;
  background-color: #fff;
}
.verification-box-auto-head span {
  font-size: 1.4375rem;
  float: right;
  margin-right: 1.25rem;
  color: #666;
}
.verification-box-auto-font {
  width: 100%;
  height: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #b8b8b8;
  font-size: 0.625rem;
}
.verification-box-auto-title {
  width: 100%;
  height: 1.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.875rem;
}
.verification-box-auto-faceboder {
  width: 8rem;
  height: 8rem;
  margin: 1rem auto 0;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}
.verification-box-auto-faceboder > img,
.verification-box-auto-faceboder > div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.verification-box-auto-faceboder-coordinate {
  background: url("/img/vcodeSpinCoordinate_c4df5bb.png") no-repeat;
  background-size: 100% 100%;
  background-position: 0.12rem;
  z-index: 100;
}
.verification-box-auto-faceboder-jz {
  background-color: #000;
  opacity: 0.5;
}
.verification-box-auto-faceboder-point-jz {
  z-index: 1001;
}
.verification-box-auto-faceboder-point-jz div {
  width: 4rem;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}
.verification-box-auto-faceboder-point-jz span {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  background-color: #fff;
  border-radius: 50%;
}
.verification-box-auto-faceboder-point-jz span:nth-child(1) {
  animation: onePointJz 800ms 0.2s infinite;
}
@keyframes onePointJz {
  to {
    transform: translateY(0px);
  }
  from {
    transform: translateY(-0.5rem);
  }
}
.verification-box-auto-faceboder-point-jz span:nth-child(2) {
  animation: onePointJz 800ms 0.4s infinite;
}
.verification-box-auto-faceboder-point-jz span:nth-child(3) {
  animation: onePointJz 800ms 0.6s infinite;
}
.verification-box-auto-faceboder-error,
.verification-box-auto-faceboder-success {
  z-index: 1002;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  line-height: 7rem;
}
.verification-box-auto-faceboder-hide {
  display: none;
}
.verification-box-auto-td {
  width: 12rem;
  height: 2rem;
  background-color: #f5f5f5;
  margin: 0.8rem auto 0;
  border-radius: 0.875rem;
  position: relative;
}
.verification-box-auto-td-title {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.verification-box-auto-td-title > p {
  width: 10.875rem;
  height: 100%;
  line-height: 2rem;
  float: right;
  text-align: center;
  font-size: 0.6rem;
  color: #000;
  animation: twoPointJz 2s linear infinite;
}
@keyframes twoPointJz {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
.slideShine {
  -moz-animation: slideShine 2s linear infinite;
  animation: slideShine 2s linear infinite;
}
.slideShine {
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  background: #b8b8b8 -webkit-linear-gradient(
      left,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8 -webkit-gradient(
      linear,
      right top,
      left top,
      from(transparent),
      color-stop(90%, #111),
      color-stop(90%, transparent)
    ) no-repeat 0 0;
  background: #b8b8b8 -webkit-linear-gradient(
      right,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8 -moz- oldlinear-gradient(
      right,
      transparent,
      #111 90%,
      transparent
    ) no-repeat 0 0;
  background: #b8b8b8
    linear-gradient(to left, transparent, #111 90%, transparent) no-repeat 0 0;
  color: transparent;
  -webkit-background-size: 20% 100%;
  background-size: 20% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: slideShine 2s linear infinite;
  -moz-animation: slideShine 2s linear infinite;
  animation: slideShine 2s linear infinite;
}
.verification-box-auto-td-yuan {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 1003;
}
.verification-box-auto-td-yuan > p {
  width: 100%;
  height: 100%;
  background-image: url("/img/rotate_f86f18e.png");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
}
.verification-box-auto-td-yuan-start {
  animation: threePonitJz 400ms ease-in-out;
}
@keyframes threePonitJz {
  to {
    transform: translateX(0rem);
  }
  from {
    transform: translateX(2rem);
  }
}
.verification-box-auto-td-yuan-errorStart {
  background-color: #f33;
  animation: fourPonitJz 400ms ease-in-out;
}
.verification-box-auto-td-yuan-errorStart p {
  background-image: url("/img/rotatedark_ed5bd13.png");
}
@keyframes fourPonitJz {
  0% {
    transform: translateX();
  }
}
</style>